<template>
  <div>
    <div id="one"></div>
    <div id="two"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  methods: {
    pir() {
      var pie = echarts.init(document.getElementById("one"));
      var option = {
        // 标题
        title: {
          text: "收入金额",
          //   subtext: 'Fake Data',        //副标题
          left: "left", //标题居中
          textStyle: {
            color: "#1f1f1f",
          },
        },
        // 提示组件
        tooltip: {
          trigger: "item",
        },
        // 图例
        legend: {
          orient: "horizontal", //图例的排列方式
          //   left: "left", //图例居左
          bottom: "0%", //Y轴居中
          textStyle: {
            color: "#1f1f1f",
          },
        },
        // 数据项
        series: [
          {
            name: "收入金额",
            type: "pie", //饼图
            radius: "50%",
            // 数据
            data: [
              { value: 1711, name: "第一季" },
              { value: 6977, name: "第二季" },
              { value: 1568, name: "第三季" },
              { value: 1568, name: "第四季" },
            ],
            itemStyle: {
                normal: {
                    color: function(params) {
                        // 预定义一个颜色数组
                        var colorList = ['#351bd6','#6e58e9','#8e7def','#bcb3f6'];
                        // 返回每个饼图扇区的颜色
                        return colorList[params.dataIndex % colorList.length];
                    }
                }
            }
          },
        ],
      };
      pie.setOption(option);
    },
    pir_two() {
      var pie_two = echarts.init(document.getElementById("two"));
      var option = {
        // 标题
        title: {
          text: "支出金额",
          //   subtext: 'Fake Data',        //副标题
          left: "left", //标题居中
          textStyle: {
            color: "#1f1f1f",
          },
        },
        // 提示组件
        tooltip: {
          trigger: "item",
        },
        // 图例
        legend: {
          orient: "horizontal", //图例的排列方式
          //   left: "left", //图例居左
          bottom: "0%", //Y轴居中
          textStyle: {
            color: "#1f1f1f",
          },
        },
        // 数据项
        series: [
          {
            name: "支出金额",
            type: "pie", //饼图
            radius: "50%",
            // 数据
            data: [
              { value: 10000, name: "第一季" },
              { value: 9977, name: "第二季" },
              { value: 15681, name: "第三季" },
              { value: 12228, name: "第四季" },
            ],
            itemStyle: {
                normal: {
                    color: function(params) {
                        // 预定义一个颜色数组
                        var colorList = ['#8778bd','#a699cd','#c4bdde','#d9d4ea'];
                        // 返回每个饼图扇区的颜色
                        return colorList[params.dataIndex % colorList.length];
                    }
                }
            }
          },
        ],
      };
      pie_two.setOption(option);
    },
  },
  mounted() {
    this.pir();
    this.pir_two();
  },
};
</script>

<style lang="less" scoped>
div {
  width: 100%;
  height: 100%;
}
#one {
  width: 100%;
  height: 50%;
  //   background-color: blueviolet;
}
#two {
  width: 100%;
  height: 50%;
//   background-color: rgb(55, 0, 255);
}
</style>
